/* reset button style */

.button {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}

/* Button layout */

.button {
  position: relative;
  min-width: 64px;
  max-width: 100%;
  min-height: 36px;
  padding: 0 12px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 2px;
}

.button .button__content {
  display: flex;
  justify-content: center;
  align-items: center;
  /* It is needed to render content on top of the ripple effect */
  position: relative;
}

.button .button__content *,
.button .button__content *:after,
.button .button__content *:before {
  pointer-events: none;
  max-height: 24px;
}

.button .button__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.button .button__icon-wrapper .svg-container {
  max-width: 24px;
  max-height: 24px;
}

.button .button__icon-wrapper .svg-container *:not(style) {
  padding: 0;
  margin: 0;
  display: inline;
}

.button .button__icon-wrapper--on-left .svg-container {
  margin-right: 4px;
}

.button .button__icon-wrapper--on-right .svg-container {
  margin-left: 4px;
}

.button::focus {
  border: none;
  outline: none;
}

.button::-moz-focus-inner {
  border: 0;
}

.button.button--icon-only {
  min-width: 32px;
  min-height: 32px;
  max-height: 32px;
  max-width: 32px;
  border-radius: 32px;
  padding: 0;
}

.button.button--icon-only .button__content {
  padding: 0;
}

.button.button--icon-only .svg-container {
  margin: 0;
}

/* Normal button colors */

.button {
  background: transparent;
}

.button .button__content {
  color: #124191;
}

.button .button__content > span svg {
  opacity: 1;
}

.button .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #124191 !important;
}

.button:not(.button--disabled):hover,
.button:not(.button--disabled):focus {
  background: rgba(0,0,0,0.2);
}

.button:not(.button--disabled):hover .button__content,
.button:not(.button--disabled):focus .button__content {
  color: rgba(18,65,145,0.76);
}

.button:not(.button--disabled):hover .button__content > span svg,
.button:not(.button--disabled):focus .button__content > span svg {
  opacity: 0.76;
}

.button:not(.button--disabled):hover .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg *,
.button:not(.button--disabled):focus .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #124191 !important;
}

.button:not(.button--disabled):active {
  background: rgba(0,0,0,0.08);
}

.button:not(.button--disabled):active .button__content {
  color: rgba(18,65,145,0.76);
}

.button:not(.button--disabled):active .button__content > span svg {
  opacity: 0.76;
}

.button:not(.button--disabled):active .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #124191 !important;
}

.button.button--disabled {
  cursor: default;
  background: transparent;
}

.button.button--disabled .button__content {
  color: rgba(0,0,0,0.38);
}

.button.button--disabled .button__content > span svg {
  opacity: 0.38;
}

.button.button--disabled .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #000 !important;
}

/* CTA button colors */

.button.button--call-to-action {
  background: #084191;
}

.button.button--call-to-action .button__content {
  color: #fff;
}

.button.button--call-to-action .button__content > span svg {
  opacity: 1;
}

.button.button--call-to-action .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #fff !important;
}

.button.button--call-to-action:not(.button--disabled):hover,
.button.button--call-to-action:not(.button--disabled):focus {
  background: #26589e;
}

.button.button--call-to-action:not(.button--disabled):hover .button__content,
.button.button--call-to-action:not(.button--disabled):focus .button__content {
  color: rgba(255,255,255,0.56);
}

.button.button--call-to-action:not(.button--disabled):hover .button__content > span svg,
.button.button--call-to-action:not(.button--disabled):focus .button__content > span svg {
  opacity: 0.56;
}

.button.button--call-to-action:not(.button--disabled):hover .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg *,
.button.button--call-to-action:not(.button--disabled):focus .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #fff !important;
}

.button.button--call-to-action:not(.button--disabled):active.button.button--call-to-action:not(.button--disabled):hover .button__content {
  color: rgba(255,255,255,0.56);
}

.button.button--call-to-action:not(.button--disabled):active.button.button--call-to-action:not(.button--disabled):hover .button__content svg {
  opacity: 1;
}

.button.button--call-to-action:not(.button--disabled):active.button.button--call-to-action:not(.button--disabled):hover .button__content svg * {
  fill: rgba(255,255,255,0.56) !important;
}

.button.button--call-to-action.button--disabled {
  background: rgba(0,0,0,0.08);
}

.button.button--call-to-action.button--disabled .button__content {
  color: rgba(0,0,0,0.38);
}

.button.button--call-to-action.button--disabled .button__content > span svg {
  opacity: 0.38;
}

.button.button--call-to-action.button--disabled .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #000 !important;
}

/* icon-only button colors */

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button {
  background: transparent;
  /* active style should be removed because of overlapping with the ripple effect. */
}

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button .button__content {
  color: rgba(0,0,0,0.54);
}

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button .button__content > span svg {
  opacity: 0.54;
}

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #000 !important;
}

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:hover,
.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:focus {
  background: rgba(0,0,0,0.2);
}

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:hover .button__content,
.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:focus .button__content {
  color: rgba(0,0,0,0.76);
}

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:hover .button__content > span svg,
.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:focus .button__content > span svg {
  opacity: 0.76;
}

.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:hover .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg *,
.button--icon-only:not(.button--call-to-action):not(.button--disabled).button:focus .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #000 !important;
}

.button--icon-only:not(.button--call-to-action).button--disabled {
  background: transparent;
}

.button--icon-only:not(.button--call-to-action).button--disabled .button__content {
  color: rgba(0,0,0,0.38);
}

.button--icon-only:not(.button--call-to-action).button--disabled .button__content > span svg {
  opacity: 0.38;
}

.button--icon-only:not(.button--call-to-action).button--disabled .button__content > span:not(.button__icon-wrapper--retain-icon-color) svg * {
  fill: #000 !important;
}

/* Make ripple effect rounded */

.button__ripple {
  border-radius: 2px;
}

.button__ripple--icon-only {
  border-radius: 32px;
}

</style>
